<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>模板</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>>
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/common.css">
 
  <style>
   
    .btn{
      width:40px;
      line-height:20px;
      background: #d3956d;
      margin: 20px;
    }
    .hide{
      display: none;
    
    }
    .show{
      display:block;
    }
    .tk{
      width:100px;
      height: 100px;
      margin-left: 20px;;
      position: absolute;
      top:50%;
      left: 50%;
      transform:translate(-50%,-50%);
      background:#fff;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-for="btn in btns" class="btn" :dataC="btn">{{btn}}</div>

    <section class="g1 hide tk" style="left:40%"> <span style="background:#000;color: #fff;">X</span>&nbsp;&nbsp;&nbsp; 123</section>
    <section class="g2 hide tk" style="left:45%"> <span style="background:#000;color: #fff;">X</span>&nbsp;&nbsp;&nbsp;456</section>
    <section class="g3 hide tk" style="left:50%"><span style="background:#000;color: #fff;">X</span>&nbsp;&nbsp;&nbsp;789</section>
    <section class="g4 hide tk" style="left:55%"><span style="background:#000;color: #fff;">X</span>&nbsp;&nbsp;&nbsp;xxx</section>
  </div>
</body>



  <script>

    
    new Vue({
        el: '#app',
        data: {
          btns:['g1','g2','g3','g4']
        },
        created:function() { 
        },
        mounted:function() {     
        },
        methods: {
        },
    })
  </script>
<script>
  let zIndex = 1;
  $(".btn").each(function () {
      
      $(this).click(function(){
        zIndex++
        let sca = $(this).attr("dataC")
        $("."+sca).removeClass("hide")
        $("."+sca).css('zIndex',zIndex)
      })
    })
    $('.tk').each(function(){
      var that = $(this)
      $(this).find("span").click(function(){
        $(that).addClass("hide")
      })
    })
</script>

</html>